<template>
  <div class="home-textiles">
    <transition>
      <component :is="comp" :navListId="navListId"></component>
    </transition>
  </div>
</template>

<script>
import Event from '@/assets/js/event'
export default {
  name: 'index',
  props: ['navListId'],
  data () {
    return {
      comp: 'BeautyCare'
    }
  },
  components: {
    BeautyCare: () => import('./goodlist'),
    cart: () => import('@/components/goodList/home/shoppingcart'),
    product: () => import('@/components/goodList/productdetails/productdetails'),
    shop: () => import('@/components/shop'),
    ConfirmOrder: () => import('@/components/confirmOrder')
  },
  mounted () {
    Event.$on('toShopCart', () => {
      this.comp = 'cart'
    })
    Event.$on('toBeautyCare', (page) => {
      this.comp = page
    })
    Event.$on('toProduct', () => {
      this.comp = 'product'
    })
    Event.$on('toShopPage', () => {
      this.comp = 'shop'
    })
  }
}
</script>

<style scoped lang="scss">
  .v-enter{
    transform: translateX(100%);
    opacity: 0;
    position: absolute;
  }
  .v-leave-to{
    transform: translateX(-100%);
    opacity: 0;
    position: absolute;
  }
  .v-leave-active,
  .v-enter-active{
    transition: all 0.7s ease;
  }
.home-textiles {
  width: 1310px;
  min-height: 355px;
  margin: 0 auto;
  overflow: hidden;
  /*padding-left: 15px;*/
  /*background-color: #f9ff1f;*/
}
</style>
